<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉菜单</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<!--
			1、字体图标
			2、下拉菜单
			3、按钮组件
			4、按钮式下拉菜单
		-->
		<!--下拉菜单-->
		<div class="container">
			<!--下拉菜单-->          <!--向右-->
			<div class="dropdown pull-right">   <!--下拉菜单-->                   <!--说明下拉-->       
				<button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">
					下拉菜单
					<span class="caret"></span>
				</button>   <!--菜单-->     <!--菜单右移-->
				<ul class="dropdown-menu dropdown-menu-right" role="menu" >
					<!--两组--> <!--这里可以不指定-->                    <!--下拉的头部-->
					<li role="presentation" class="dropdown-header">大写的一到四</li>
					<li><a href="#" role="menuitem">一</a></li>
					<li><a href="#" role="menuitem">二</a></li>
					<li><a href="#" role="menuitem">三</a></li>
					<li><a href="#" role="menuitem">四</a></li>
					<li role="presentation" class="dropdown-header">小写的1到4</li>
					                                <!--分割线-->
					<li role="presentatiion" class="divider"></li>
					<li><a href="#" role="menuitem">1</a></li>
					<li><a href="#" role="menuitem">2</a></li>
					         <!--不可选用-->
					<li class="disabled"><a href="#" role="menuitem">3</a></li>
					<li><a href="#" role="menuitem">4</a></li>
				</ul>
			</div>
		</div>	
	
	
	    <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	    <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
